@import url("../../assets/css/magic.css");
$cm-color: #a29bfe;
.container {
  padding: 20rpx;
  background-color: #000;
  box-sizing: border-box;
  .cm {
    width: 100%;
    height: 119rpx;
    display: flex;
    font-family: "Reggae One", cursive;
    justify-content: center;
  }

  .txt {
    position: relative;
    font-size: 12vw;
    line-height: 16vw;
    overflow: hidden;
    -webkit-text-stroke: 3px #7272a5;
    &::before {
      content: " ";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-image: linear-gradient(45deg, $cm-color, #fff);
      mix-blend-mode: multiply;
    }

    &::after {
      content: "";
      background: radial-gradient(circle, #fff, #000 50%);
      background-size: 25% 25%;
      position: absolute;
      top: -100%;
      left: -100%;
      right: 0;
      bottom: 0;
      mix-blend-mode: color-dodge;
      animation: mix 8s linear infinite;
    }
  }

  .form {
    color: #fff;
    .form-item {
      position: relative;
      padding: 0 20rpx;
      margin-top: 56rpx;
      &.active-item {
        .tip {
          top: -44rpx;
          font-size: 38rpx;
          color: #a29bfe;
        }
      }
      .tip {
        position: absolute;
        z-index: 3;
        top: 12rpx;
        left: 23rpx;
        transition: all 0.05s linear;
        padding-left: 28rpx;
        color: #eaeaea;
      }
      .spe {
        padding-left: 28rpx;
        color: $cm-color;
      }
      .rd {
        display: inline-block;
        margin: 0 20rpx;
        .radio {
          margin: 0 20rpx;
        }
      }
      .btn {
        position: relative;
        margin: auto;
        width: 95%;
        line-height: 64px;
        text-align: center;
        color: #fff;
        font-size: 30rpx;
        border: 2rpx solid $cm-color;
        border-radius: 10rpx;
        background: $cm-color;
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
          filter: contrast(1.1);
        }

        &:active {
          filter: contrast(0.9);
        }

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: -12rpx;
          left: -12rpx;
          right: -12rpx;
          bottom: -12rpx;
          border: 2px solid $cm-color;
          transition: all 0.5s;
          animation: clippath 3s infinite linear;
          border-radius: 12rpx;
        }

        &::after {
          animation: clippath 3s infinite -1.5s linear;
        }
      }
      .inp {
        border-bottom: 1px solid #6e6e6e;
        &.inp-active {
          border-bottom: 1px solid#a29bfe;
        }
      }

      @keyframes clippath {
        0%,
        100% {
          clip-path: inset(0 0 98% 0);
        }

        25% {
          clip-path: inset(0 98% 0 0);
        }
        50% {
          clip-path: inset(98% 0 0 0);
        }
        75% {
          clip-path: inset(0 0 0 98%);
        }
      }
    }
    .at-input {
      position: relative;
      z-index: 4;
      background: transparent;
      padding: 10rpx 0;
      input {
        color: #fff;
      }
      &::after {
        border: none;
      }
    }

    .at-button--primary {
      color: #fff;
      border: 1px solid $cm-color;
      background: $cm-color;
    }

    .at-textarea {
      padding-left: 20rpx;
      background-color: #000;
      border: none;
    }
  }
}
.at-action-sheet__container {
  color: #000;
}
@keyframes mix {
  to {
    transform: translate(50%, 50%);
  }
}
